/* eslint-disable react-native/no-inline-styles */
import React, {Component} from 'react';
import moment from 'moment';
import {
  View,
  Text,
  StatusBar,
  Image,
  StyleSheet,
  TouchableHighlight,
  ScrollView,
} from 'react-native';
import LinearGradient from 'react-native-linear-gradient';
import SelectDialog from 'react-native-select-dialog';
import {Button} from 'react-native-elements';
import HeaderNav from '../components/header';
import {cwGet} from '../utils/http';
import logo from '../assets/logo.png';
import Icon from 'react-native-vector-icons/FontAwesome';
export default class HomePage extends Component {
  constructor(props) {
    super(props);
    this.state = {
      bottomSheet: false,
      nowDevice: global.nowDevice,
      deviceList: [],
      ranliaobi: '',
      jiaobi: '',
      meibi: '',
      chanliang: '',
        fengliang: '',
        fengya: '',
        fuyang: '',
        yacha: '',
    };
    this.getImport = this.getImport.bind(this);
  }
  toPage(key) {
    const {navigate} = this.props.navigation;
    console.log(key);
    switch (key) {
      case 'device':
        navigate('device');
        break;
      case 'nowData':
        navigate('nowData');
        break;
      case 'warning':
        navigate('error');
        break;
      case 'drawing':
        navigate('drawing');
        break;
      case 'report':
        navigate('report');
        break;
      case 'history':
        navigate('history');
        break;
      case 'video':
        navigate('video');
        break;
      case 'fuelratio':
        navigate('fuelratio');
        break;
      case 'coalinject':
        navigate('coalinject');
        break;
    }
  }
  componentDidMount() {
    cwGet('Device/GetDevices')
      .then(res => {
        console.log(res);
        this.setState({deviceList: res, nowDevice: res[0]});
        global.nowDevice = res[0];
        global.deviceList = res;
        this.getImport();
      })
      .catch(console.log);
  }

  getImport() {
    const start = moment()
      .subtract(24, 'hours')
      .format('YYYY-MM-DD HH:mm:ss');
    const end = moment().format('YYYY-MM-DD HH:mm:ss');
    cwGet(
      'Others/GetModelReports?id=' +
        global.nowDevice.name[0] +
        '&start=' +
        encodeURIComponent(start) +
        '&end=' +
        encodeURIComponent(end),
    )
      .then(tagsResult => {
        console.log(tagsResult);
        const {data} = tagsResult;
        let d = data[0];
        console.log(d);
        this.setState({
          ranliaobi: Number.parseFloat(d.ranliaobi).toFixed(0),
          jiaobi: Number.parseFloat(d.jiaobi).toFixed(0),
          meibi: Number.parseFloat(d.meibi).toFixed(0),
          chanliang: Number.parseFloat(d.chanliang).toFixed(0),

            fengliang: Number.parseFloat(d.fengliang).toFixed(0),
            fengya: Number.parseFloat(d.fengya).toFixed(0),
            fuyang: Number.parseFloat(d.fuyang).toFixed(0),
            yacha: Number.parseFloat(d.yacha).toFixed(0),
        });
      })
      .catch(e => {});
  }
  render() {
    const menusItem = [
      {
        itemName: '设备在线',
        icon: 'cog',
        iconColor: '#408DFC',
        key: 'device',
      },
      {
        itemName: '实时数据',
        icon: 'cloud',
        iconColor: '#62EAAB',
        key: 'nowData',
      },
      {
        itemName: '报警信息',
        icon: 'warning',
        iconColor: '#FE5950',
        key: 'warning',
      },
    ];
    const mentCard = [
        {
            itemName: '压量关系趋势',//历史数据  ==>压量关系趋势
            color: '#F0A176',
            key: 'history',
        },

        {
            itemName: '智能温控趋势',//喷煤趋势==>智能温控趋势
            color: '#69ccDD',
            key: 'coalinject',
        },
      {
        itemName: '主要参数画面',//工艺图==>主要参数画面
        color: '#52D09C',
        key: 'drawing',
      },
        {
            itemName: '燃料比查询',
            color: '#F0DD76',
            key: 'fuelratio',
        },
      {
        itemName: '报表统计',
        color: '#FDC062',
        key: 'report',
      },
      {
        itemName: '炉顶热像仪',//视频==>炉顶热像仪
        color: '#69ABD2',
        key: 'video',
      }

    ];
//网站http://121.36.28.99:3000/main/history-data 登陆admin/admin
    return (
      <ScrollView>
        <View>
          <HeaderNav />
          <LinearGradient
            start={{x: 0, y: 0}}
            end={{x: 1, y: 0}}
            colors={['#36fca4', '#0debd4']}
            style={homeStyles.mainCard}>
            <View style={homeStyles.mainCardTitle}>
              <Text>关键信息</Text>
              <Image style={{width: 100, height: 30}} source={logo} />
            </View>
            <View
              style={{
                paddingVertical: 20,
                flex: 1,
                justifyContent: 'space-around',
                flexDirection: 'row',
              }}>
              {/****fontSize: 20  改 14****/}
              <View style={{justifyContent: 'space-around'}}>
                <View style={{flexDirection: 'row', alignItems: 'center'}}>
                  <Text style={{color: '#183ed5', fontSize: 14}}>煤比：</Text>
                  <Text>{this.state.meibi} kg/t</Text>
                </View>
                <View style={{flexDirection: 'row', alignItems: 'center'}}>
                  <Text style={{color: '#183ed5', fontSize: 14}}>焦比：</Text>
                  <Text>{this.state.jiaobi} kg/t</Text>
                </View>
                <View style={{flexDirection: 'row', alignItems: 'center'}}>
                  <Text style={{color: '#183ed5', fontSize: 14}}>风量：</Text>
                  <Text>{this.state.fengliang} Nm³/min</Text>
                </View>
                <View style={{flexDirection: 'row', alignItems: 'center'}}>
                  <Text style={{color: '#183ed5', fontSize: 14}}>热风压力：</Text>
                  <Text>{this.state.fengya} kPa</Text>
                </View>
              </View>
              <View style={{justifyContent: 'space-around'}}>
                <View style={{flexDirection: 'row', alignItems: 'center'}}>
                  <Text style={{color: '#183ed5', fontSize: 14}}>燃料比：</Text>
                  <Text>{this.state.ranliaobi} kg/t</Text>
                </View>
                <View style={{flexDirection: 'row', alignItems: 'center'}}>
                  <Text style={{color: '#183ed5', fontSize: 14}}>产量：</Text>
                  <Text>{this.state.chanliang} t</Text>
                </View>
                <View style={{flexDirection: 'row', alignItems: 'center'}}>
                  <Text style={{color: '#183ed5', fontSize: 14}}>富氧量：</Text>
                  <Text>{this.state.fuyang} Nm³/h</Text>
                </View>
                <View style={{flexDirection: 'row', alignItems: 'center'}}>
                  <Text style={{color: '#183ed5', fontSize: 14}}>压差：</Text>
                  <Text>{this.state.yacha} kPa</Text>
                </View>
              </View>

            </View>
          </LinearGradient>
          <Button
            titleStyle={{color: 'black'}}
            buttonStyle={homeStyles.selectButton}
            title={this.state.nowDevice.name}
            onPress={() => {
              this.selectDialog.show();
            }}
            icon={
              <Icon
                style={{position: 'absolute', right: 30}}
                name={'chevron-down'}
                color={'black'}
                size={15}
              />
            }
            iconRight={true}
          />
          <View
            style={[
              homeStyles.flexBox,
              {backgroundColor: '#e0f1f8', padding: 20},
            ]}>
            {menusItem.map(item => {
              return (
                <TouchableHighlight
                  key={item.key}
                  underlayColor={'#E3E3E3'}
                  style={homeStyles.cardItem}
                  onPress={this.toPage.bind(this, item.key)}>
                  <View style={homeStyles.cardItemText}>
                    <Icon
                      style={{backgroundColor: 'transparent'}}
                      name={item.icon}
                      color={item.iconColor}
                      size={24}
                    />
                    <Text style={homeStyles.text}> {item.itemName}</Text>
                  </View>
                </TouchableHighlight>
              );
            })}
          </View>
          <View style={homeStyles.flexBox}>
            {mentCard.map(item => {
              return (
                <TouchableHighlight
                  key={item.key}
                  underlayColor={'#E3E3E3'}
                  style={[
                    homeStyles.cardItemTwo,
                    {backgroundColor: item.color},
                  ]}
                  onPress={this.toPage.bind(this, item.key)}>
                  <Text style={[homeStyles.text, {color: '#fff'}]}>
                    {item.itemName}
                  </Text>
                </TouchableHighlight>
              );
            })}
          </View>
        </View>
        <SelectDialog
          ref={ref => {
            this.selectDialog = ref;
          }}
          titles={'选择设备'}
          positionStyle={{backgroundColor: '#638AD0'}}
          valueChange={item => {
            this.setState({
              nowDevice: item,
            });
            global.nowDevice = item;
            this.getImport();
          }}
          datas={this.state.deviceList}
          animateType={'fade'}
          renderRow={(rowData, rowID, highlighted) => {
            return <Text style={{padding: 10}}>{rowData.name}</Text>;
          }}
          innersHeight={400}
        />
      </ScrollView>
    );
  }
}

const homeStyles = StyleSheet.create({
  mainCard: {
    minHeight: 240,//200改300
    backgroundColor: '#408DFC',
    marginHorizontal: 10,
    borderRadius: 4,
  },
  selectButton: {
    backgroundColor: '#abc8e6',
    marginHorizontal: 10,
    paddingVertical: 15,
    marginVertical: 10,
  },
  cardItem: {
    borderColor: '#babbbd',
    borderWidth: 2,
    alignItems: 'center',
    justifyContent: 'center',
    width: 80,
    height: 80,
    borderRadius: 3,
    backgroundColor: '#fff',
  },
  cardItemText: {
    alignItems: 'center',
    borderRadius: 8,
  },
  flexBox: {
    marginVertical: 10,
    marginHorizontal: 10,
    flexDirection: 'row',
    justifyContent: 'space-between',
    flexWrap: 'wrap',
  },
  cardItemTwo: {
    width: '45%',
    padding: 15,
    marginBottom: 10,
    borderRadius: 8,
    alignItems: 'center',
  },
  text: {
    color: '#5a5a5a',
    textAlign: 'center',
    lineHeight: 20,
  },
  mainCardTitle: {
    padding: 10,
    borderBottomWidth: 0.4,
    borderBottomColor: '#fff',
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
  },
});
